<template>
  <div id="app">
    <div class="head">
      <div class="" style="float: left">
        <i
          v-if="isshowCollapse"
          :class="!isCollapse ? 'el-icon-s-fold' : 'el-icon-s-unfold'"
          @click="isCollapse = !isCollapse"
        ></i
        >筱欣电影管理界面
      </div>
      <!-- <el-button
          type="primary"
          size="default"
          @click="isCollapse = !isCollapse"
        ><i class=""></i></el-button> -->

      <div style="float: right">
        <el-dropdown trigger="click" @command="Logout">
          <span class="el-dropdown-link">
            <div class="block">
              <el-avatar
                :size="50"
                :src="circleUrl"
                class="toxiang"
              ></el-avatar>
            </div>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              icon="el-icon-remove-outline"
              v-show="!isLogin()"
              command="login"
            >
              登录
            </el-dropdown-item>
            <el-dropdown-item
              icon="el-icon-remove-outline"
              v-show="isLogin()"
              command="zhuxiao"
            >
              注销
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="content">
      <el-menu
        class="el-menu-vertical-demo content_right"
        :class="isCollapse ? '' : 'menu_bug'"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
        :router="true"
        :default-active="activeIndex"
      >
        <el-menu-item index="1" :route="{ name: 'Home' }">
          <i class="el-icon-s-home"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-s-tools"></i>
            <span slot="title">影片管理</span>
          </template>
          <el-submenu index="2-1">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span slot="title">分类</span>
            </template>
            <el-menu-item
              index="2-1-1"
              :route="{ name: 'Video', query: { category: 1 } }"
            >
              电影</el-menu-item
            >
            <el-menu-item
              index="2-1-2"
              :route="{ name: 'Video', query: { category: 2 } }"
              >动漫</el-menu-item
            >
            <el-menu-item
              index="2-1-3"
              :route="{ name: 'Video', query: { category: 3 } }"
              >综艺</el-menu-item
            >
            <el-menu-item
              index="2-1-4"
              :route="{ name: 'Video', query: { category: 4 } }"
              >电视剧</el-menu-item
            >
            <el-menu-item
              index="2-1-5"
              :route="{ name: 'Video', query: { category: 5 } }"
              >纪录片</el-menu-item
            >
          </el-submenu>
          <el-menu-item-group>
            <span slot="title">影片操作</span>
            <el-menu-item index="2-6" :route="{ name: 'addVideo', query: {} }">
              <i class="el-icon-folder-add"></i>添加影片</el-menu-item
            >
            <el-menu-item index="2-7" :route="{ name: 'Search', query: {} }">
              <i class="el-icon-search"></i>
              搜索影片</el-menu-item
            >
          </el-menu-item-group>
        </el-submenu>
        <el-menu-item index="3" :route="{ name: 'User' }">
          <i class="el-icon-user-solid"></i>
          <span slot="title">用户管理</span>
        </el-menu-item>
        <el-menu-item index="4" :route="{ name: 'About' }">
          <i class="el-icon-document"></i>
          <span slot="title">关于</span>
        </el-menu-item>
      </el-menu>
      <router-view class="content_left" :key="key"></router-view>
    </div>
  </div>
</template>

<style>
.toxiang {
  position: relative;
}
.toxiang > img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.content_right {
  flex: 0 0 auto;
}
.content_left {
  flex: 1 1 auto;
  padding-right: 0.2rem;
}
.content {
  display: flex;
  flex: 1 1 auto;
}
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
h1 {
  font-size: 30px;
}
html {
  font-size: 13.3333333vw;
}
body {
  font-size: 0.15rem;
}
.menu_bug {
  /* 解决flex布局引起的菜单塌陷 */
  min-width: 201px;
}
.head {
  font-size: 30px;
  border: solid 1px #e6e6e6;
}
.head i {
  display: inline-block;
  width: 64px;
  text-align: center;
  color: #409eff;
}
</style>


<script>
//import { mapGetters } from "vuex";
import { getToken } from "@/utils/TokenTools";
import { removeToken } from "@/utils/TokenTools";
export default {
  data() {
    return {
      isCollapse: false, //是否合上
      isshowCollapse: true,
      circleUrl:
        "http://one.talesxiaoxin.cn/?/images/2020/11/10/4iYtTyQ7aO/76763707_p0.png", //头像url
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    Logout(command) {
      if (command == "login") {
        removeToken();
        this.$router.push({
          name: "Login",
        });
      } else {
        removeToken();
        this.$router.push({
          name: "Login",
        });
      }
    },
    isLogin() {
      return !!getToken();
    },
  },
  mounted() {
    let a = () => {
      let html = document.querySelector("html");
      if (html.offsetWidth < 770) {
        this.isCollapse = true;
        this.isshowCollapse = false;
      }
    };
    a(); //判定窗口宽度让菜单收起
  },
  computed: {
    activeIndex() {
      //:default-active="activeIndex"根据index绑定数据
      const { name } = this.$route;
      const query = this.$route.query;
      switch (name) {
        case "Login":
        case "Home":
          return "1";
        case "User":
          return "3";
        case "About":
          return "4";
        case "Search":
          return "2-7";
        case "addVideo":
          return "2-6";
        case "Video":
          switch (+query.category) {
            case 1:
              return "2-1-1";
            case 2:
              return "2-1-2";
            case 3:
              return "2-1-3";
            case 4:
              return "2-1-4";
            case 5:
              return "2-1-5";
          }
          return 1;
      }
      return "2";
    },
    key() {
      //解决同页面query改变不跳转
      return this.$route.name
        ? this.$route.name + +new Date()
        : this.$route + new Date();
    },
  },
};
</script>
